<template>
	<div class="user_personal_wrapper">
		<div class="base">
			<avatar-uploader v-model="userForm.attachmentId" :size="100" :src="avatarUrl"></avatar-uploader>
			<user-data-info :data="userInfo"></user-data-info>
			<learning-score :user-account="userInfo.account"></learning-score>
		</div>
		<el-form ref="form" :model="userForm" :label-width="labelWidth" :label-position="labelPosition">
			<el-form-item label="登录账号" prop="account">
				<el-input v-model="userForm.account" placeholder="请输入登录账号" disabled>
					<el-button slot="append" @click.native="handleUpdatePassword()">修改密码</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="用户名称" prop="userName">
				<el-input v-model="userForm.userName" placeholder="请输入用户名称"></el-input>
			</el-form-item>
			<el-form-item label="用户简介" prop="content">
				<!-- <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入内容" v-model="userForm.content"></el-input> -->
				<!-- <sw-wang-editor mode="question"></sw-wang-editor> -->
				<sw-tiny-editor></sw-tiny-editor>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSaveUserInfo()">保存</el-button>
			</el-form-item>
		</el-form>
		<amend-password v-model="amendDialog"></amend-password>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import learningScore from './score';
import userDataInfo from './userData';
import amendPassword from './password';
import avatarUploader from './uploader';
import { userDetail, updateUser } from '@/api/system/tbSysUser';
export default {
	components: { avatarUploader, amendPassword, learningScore, userDataInfo },
	data() {
		return {
			userForm: {},
			amendDialog: false
		};
	},
	computed: {
		...mapGetters(['userInfo', 'siteInfo']),
		avatarUrl() {
			if (!!this.userForm.attachmentId && this.userForm.attachmentId !== '-1') {
				return this.userForm.avatar;
			} else if (!!this.siteInfo.headPic) {
				return this.siteInfo.headPic;
			} else {
				return require('@/assets/img/avatar_image.png');
			}
		},
		labelWidth() {
			return this.isMobile ? '' : '80px';
		},
		labelPosition() {
			return this.isMobile ? 'top' : 'right';
		}
	},
	mounted() {
		this.getUserDetail();
	},
	methods: {
		//获取用户详情
		async getUserDetail() {
			let id = this.userInfo.id;
			let result = await userDetail(id).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				if (!!datas.attachmentId && datas.attachmentId !== '-1') {
					let avatar = await this.$store.dispatch('getFileUrl', datas.attachmentId);
					datas['avatar'] = `${process.env.VUE_APP_BASEURL}${this.$removeUrlDomain(avatar)}`;
				}
				this.userForm = { ...datas };
			}
		},

		handleUpdatePassword() {
			this.amendDialog = true;
		},

		//保存用户信息
		async handleSaveUserInfo() {
			let params = { ...this.userForm };
			let result = await updateUser(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('保存成功');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.user_personal_wrapper {
	.base {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 16px;
		border-bottom: solid 1px #e4e7ed;
	}
	.el-form {
		padding: 16px 16px 0;
	}
}
@media screen and (max-width: 767px) {
	.user_personal_wrapper .el-form .el-button {
		width: 100%;
	}
}
</style>
